<template>
    <div class="add">
        <SavePage :title="id ? '编辑巡检计划' : '新建巡查计划'">
            <!-- 审批显示操作按钮 -->
            <template slot="buttons">
                <BaseButton :loading="submitLoading" @click="submit()">保存</BaseButton>
            </template>
            <template slot="body">
                <div class="info">
                    <TitleTips title="基础信息" :required="true" />
                    <el-form ref="refForm" size="medium" label-width="130px" :model="form" :rules="rules">
                        <el-row>
                            <el-col :xl="6" :lg="8">
                                <el-form-item label="巡查类型：" prop="type">
                                    <el-select v-model="form.type" clearable placeholder="请选择" style="width: 100%">
                                        <el-option v-for="item in patrolType" :key="item.id" :label="item.name" :value="item.id" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :xl="6" :lg="8">
                                <el-form-item label="重复周期：" prop="repetitionPeriod">
                                    <el-select v-model="form.repetitionPeriod" clearable placeholder="请选择" style="width: 100%">
                                        <el-option v-for="item in patrolPeriod" :key="item" :label="item" :value="item" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :xl="6" :lg="8">
                                <el-form-item label="巡查部门：" prop="deptId">
                                    <OrgSelect :is-filter="true" :value.sync="form.deptId" :name.sync="form.deptName"></OrgSelect>
                                </el-form-item>
                            </el-col>
                            <el-col :xl="6" :lg="8">
                                <el-form-item label="公路名称：" prop="highwayCode">
                                    <RoadSelect :value.sync="form.highwayCode" :name.sync="form.highwayName" :stake.sync="form.roadStake"></RoadSelect>
                                </el-form-item>
                            </el-col>
                            <el-col :xl="12" :lg="16" style="display:flex">
                                <el-col style="padding: 0">
                                    <el-form-item label="桩号范围：" prop="startStake1">
                                        <el-input v-model.trim="form.startStake1" :disabled="!form.highwayCode" placeholder="请输入" maxlength="3" @change="form.endStake1 = ''">
                                            <div slot="prepend" class="input-unit">K</div>
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col style="padding: 0">
                                    <el-form-item
                                        class="spe-item"
                                        label-width="30px"
                                        :disabled="!form.highwayCode"
                                        label="+"
                                        prop="endStake1"
                                        :rules="useCheckStake(form.highwayCode, 1, form.startStake1, form.roadStake)"
                                    >
                                        <el-input
                                            v-model.trim="form.endStake1"
                                            :disabled="!form.highwayCode && !form.startStake1"
                                            maxlength="3"
                                            placeholder="请输入"
                                        />
                                    </el-form-item>
                                </el-col>
                                <el-col style="padding: 0">
                                    <el-form-item class="spe-item" label-width="50px" label="~" prop="startStake2">
                                        <el-input v-model.trim="form.startStake2" placeholder="请输入" maxlength="3" :disabled="!form.highwayCode" @change="form.endStake2 = ''">
                                            <div slot="prepend" class="input-unit">K</div>
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col style="padding: 0">
                                    <el-form-item
                                        class="spe-item"
                                        label-width="30px"
                                        label="+"
                                        prop="endStake2"
                                        :rules="useCheckStake(form.highwayCode, 1, form.startStake2, form.roadStake)"
                                    >
                                        <el-input
                                            v-model.trim="form.endStake2"
                                            maxlength="3"
                                            :disabled="!form.highwayCode && !form.startStake2"
                                            placeholder="请输入"
                                        />
                                    </el-form-item>
                                </el-col>
                            </el-col>
                            <el-col :xl="6" :lg="8">
                                <el-form-item label="创建人员：">
                                    <el-input v-model.trim="form.createUserName" readonly disabled></el-input>
                                </el-form-item>
                            </el-col>
                             <el-col :xl="6" :lg="8">
                                <el-form-item label="创建部门：" prop="createDep">
                                    <el-select v-model="form.createDep" :disabled="depOptions.length === 0" clearable placeholder="请选择" style="width: 100%">
                                        <el-option v-for="item in depOptions" :key="item.id" :label="item.name" :value="item.id" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                             <el-col :xl="6" :lg="8">
                                <el-form-item label="开始执行日期：" prop="firstInspectDate">
                                    <el-date-picker
                                        v-model="form.firstInspectDate"
                                        type="date"
                                        value-format="yyyy-MM-dd"
                                        :editable="false"
                                        placeholder="请选择"
                                        style="width: 100%"
                                    />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-divider></el-divider>
                        <el-form-item label="巡查内容：" prop="content">
                            <el-checkbox-group v-model="form.content" class="check-box">
                                <div class="check-list">
                                    <div v-for="(item, index) in patrolContent" :key="index" class="check-item">
                                        <el-checkbox :label="item"></el-checkbox>
                                    </div>
                                </div>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-form>
                </div>
            </template>
        </SavePage>
    </div>
</template>

<script>
import { InspectionPlanModel, RoadModel } from '@/models'
import useSuccess from '@/hooks/useSuccess'
import useCheckStake from '@/hooks/useCheckStake'
import { patrolContent, patrolType, patrolPeriod } from '../../../constants'

export default {
    name: 'PlanAdd',
    data() {
        return {
            model: new InspectionPlanModel(),
            roadModel: new RoadModel(),
            id: this.$route.query.id,
            form: {
                content: [],
                startStake1: '',
                endStake1: '',
                startStake2: '',
                endStake2: '',
                startStakeNo1: '',
                endStakeNo1: '',
                startStakeNo2: '',
                endStakeNo2: '',
                stake1: '',
                stake2: '',
                createUserName: this.$store.getters.avatar.name,
                createUser: this.$store.getters.avatar.id,
                createDep: ''
            },
            checkList: [],
            rules: {
                type: [{ required: true, message: '请选择巡查类型', trigger: 'change' }],
                repetitionPeriod: [{ required: true, message: '请选择重复周期', trigger: 'change' }],
                deptId: [{ required: true, message: '请选择巡查部门', trigger: 'change' }],
                highwayCode: [{ required: true, message: '请选择公路名称', trigger: 'change' }],
                startStake1: [{ required: true, message: '请输入桩号', trigger: 'blur' }],
                firstInspectDate: [{ required: true, message: '请选择开始执行年月', trigger: 'change' }],
                content: [{ required: true, message: '请选择巡查内容', trigger: 'change' }],
                createDep: [{ required: true, message: '请选择创建部门', trigger: 'change' }],
            },
            submitLoading: false,
            roadOptions: [],
            depOptions: []
        }
    },
    computed: {
        patrolContent() {
            return patrolContent
        },
        patrolType() {
            return patrolType
        },
        patrolPeriod() {
            return patrolPeriod
        },
        useCheckStake() {
            return useCheckStake
        }
    },
    created() {
        if (this.id) {
            this.detail()
        }
        this.depOptions = this.$store.getters.avatar.depart || []
        if (this.depOptions.length > 0) {
            this.form.createDep = this.depOptions[0].id
        }
    },
    methods: {
        detail() {
            this.model.detail({ id: this.id }).then((res) => {
                this.form = res
                // 需要转换为数字型数组才可以产生回填效果
                this.form.deptId = res.deptId.split(',').map((item) => {
                    return parseInt(item)
                })
            })
        },
        submit() {
            this.$refs['refForm'].validate(async (valid) => {
                if (valid) {
                    this.submitLoading = true
                    const obj = {
                        ...this.form,
                        deptId: this.form.deptId.join(','),
                        createDepName: (this.depOptions.find(item => item.id === this.form.createDep) || {}).name
                    }
                    delete obj.roadStake
                    // 编辑
                    if (this.id) {
                        obj.id = this.id
                        // 新增
                    }
                    this.model
                        .saveOrUpdate({ ...obj })
                        .then((res) => {
                            useSuccess({ message: '保存成功', onlyTip: false })
                        })
                        .finally(() => {
                            this.submitLoading = false
                        })
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.spe-item {
    ::v-deep {
        .el-form-item__label {
            text-align: center;
            padding: 0;
            &::before {
                display: none;
            }
        }
        .el-input,
        .el-input__inner {
            min-width: auto !important;
        }
    }
}

.add {
    width: 100%;
    // padding:0 20px
    .info {
        .sub-title {
            font-size: 14px;
            font-weight: 600;
        }
        .check-box {
            margin-top: 20px;
            .check-list {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                flex-wrap: wrap;
                .check-item {
                    width: 33%;
                    margin: 4px 0;
                }
            }
        }
    }
}
</style>
